<template>
	<div>
		<div class="table" v-if="parentDetailData.isTabelShow">

			<div class="container">
				<div>
					<div class="handle-box" style="float: left">
						<el-select v-model="searchcondition.bannerType" placeholder="广告图分类" @change="changeType()">
							<el-option v-for="(value,key) in bannerTypes" :key="key" :label="value" :value="key">
							</el-option>
						</el-select>
					</div>
					<div style="float: right">
						<el-button type="primary" @click="handleDetail(null,null)" icon="add">添加 </el-button>
					</div>
				</div>
				<el-table :data="tableData" border style="width: 100%" ref="multipleTable" v-loading="loading">
					<el-table-column label="图片">
						<template slot-scope="scope">
							<img :src="globaldata.imgBaseUrl+scope.row.imgId" style="height: 100px; width: auto;" />
						</template>
					</el-table-column>
					<el-table-column prop="bannerName" label="描述" width="150"></el-table-column>
					<el-table-column prop="seqNo" label="排序编号" width="150"></el-table-column>
					<el-table-column label="操作" width="150">
						<template slot-scope="scope">
							<el-button size="small" type="primary" @click="handleDetail(scope.$index, scope.row)">编辑</el-button>
							<el-button size="small" type="danger" @click="handleDelete(scope.$index,scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div class="pagination">
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 50]" :page-size="searchcondition.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
					</el-pagination>
				</div>

			</div>

		</div>
		<imagedetail ref="detail" :id="id" :select_type="searchcondition.bannerType" :parentDetailData="parentDetailData" v-on:close="handleClose"></imagedetail>
	</div>
</template>

<script>
	import Vue from 'vue';
	import $ from 'jquery';
	import imagedetail from './detail'
	import service from '../../../../js/common/imgservice.js'
	export default {
		components: {
			imagedetail
		},
		data() {
			return {
				test: 0,
				tableData: [],
				searchcondition: {
					bannerType: '', //广告图类型 
					pageNum: 1,
					pageSize: 10
				},
				id: 0,
				total: 0,
				modelData: {},
				bannerTypes: [],
				loading: true,
				parentDetailData: {
					isTabelShow: true
				},
			}
		},
		mounted() {
			let self = this;
			let param_arr = ['banner_picture'];
			this.tool.getDirByKey(this, param_arr).then(() => {
				self.bannerTypes = self.$store.state.banner_picture;				
				self.searchcondition.bannerType = "home_banner";
				service.getPageData(this);
			});
		},
		computed: {
			data() {
				return this.tableData.filter(function(d) {
					return d;
				});
			},
			isTabelShow() {
				return this.parentDetailData.isTabelShow;
			}
		},
		methods: {
			handleCurrentChange(val) { //翻页
				this.searchcondition.pageNum = val;
				service.getPageData(this);
			},
			handleSizeChange(val) { //每页数量
				this.searchcondition.pageSize = val;
				service.getPageData(this);
			},
			changeType() {
				this.searchcondition.pageNum = 1;
				service.getPageData(this);
			},
			handleDelete(index, row) {
				service.handleDelete(this, row.id);
			},
			handleDetail(index, row) {
				service.handleDetail(this, row);
			},
			handleClose() {
				service.getPageData(this);
			}
		}
	}
</script>